<template>
    <h2>用户借款列表</h2>
    借款款项名称<input type="text" v-model="state.name" />
    利息<select v-model="state.iid">
                        <option value="0">--请选择--</option>
                        <option :value="item.I_Id" v-for="item in llist">{{ item.I_Year}}年{{item.I_Interest}}%</option>
                      </select>
                      <input type="button" @click="show" value="查询" />
    <table class="table table-bordered">
        <tr align="center">
            <td><input type="checkbox"></td>
                    <td>借款项目编号</td>
                    <td>借款项目名称</td>
                    <td>借款最高金额</td>
                    <td>借款最高年限</td>
                    <td>预计月还款金额</td>
                    <td>利息值</td>
                    <td>操作</td>
        </tr>
        <tr align="center" v-for="item in list">
            <td><input type="checkbox"></td>
                    <td>{{item.B_Id}}</td>
                    <td>{{item.B_Name}}</td>
                    <td>{{item.B_Money}}</td>
                    <td>{{item.B_Year}}</td>
                    <td>{{(item.B_Money/100/12).toFixed(2)}}CNY</td>
                    <td>{{item.T_Interest.I_Interest}}</td>
                    <td><input type="button" value="借款" class="btn btn-primary" @click="borrow(item.B_Id)" /></td>
        </tr>
    </table>
    <div>
        <input type="button" value="首页" @click="page('a')" />
            <input type="button" value="上一页" @click="page('prev')" />
            <input type="button" value="下一页" @click="page('next')" />
            <input type="button" value="尾页" @click="page('b')" />
            共<span style="color: red;">{{ListCount}}</span>条数据
            每页<span style="color: red;">{{state.pageSize}}</span>条 
            当前第<span style="color: red;">{{state.pageIndex}}</span>/
            <span style="color: red;">{{PageCount}}</span>页
    </div>
    
    </template>
    
    <script setup lang="ts">
    import{reactive,ref,toRefs,onMounted} from 'vue'
    import { useRouter } from 'vue-router'
    import axios from 'axios'
    
    let router=useRouter()
    let data:any=reactive({
        list:[],
        llist:[],
        state:{
            name:'', 
            iid:'',
            pageSize:'2',
            pageIndex:'1',
        },
        ListCount:'0',
        PageCount:'0',
    })
    let {state,ListCount,PageCount,list,llist}=toRefs(data)
    onMounted(()=>{
        show();
        bang();
    })
    //绑下拉
    const bang=()=>{
        axios({
            url:"/api/Borrow/SelInterest",
            method:'get',
        })
        .then(res=>{
            console.log(res.data.data);
            llist.value=res.data.data;
        })
        .catch(err=>{
            console.log(err);   
        })
    }
    //显示
    const show=()=>{
        axios({
            url:"/api/Borrow/GetBorrowList",
            method:'get',
            params:state.value
        })
        .then(res=>{
            console.log(res.data.data)
            list.value=res.data.data;
            ListCount.value=res.data.ListCount
            PageCount.value=res.data.PageCount
        })
        .catch(err=>{
            console.log(err)
        })
    }
    //分页
    const page=(aa:any)=>{
        console.log(aa) 
        if(aa=='a')
        {
            state.value.pageIndex=1;
       }
        else if(aa=='b')
        {
            state.value.pageIndex=PageCount.value;     
        }
       else if(aa=='prev')
        {
           state.value.pageIndex--; 
        }
       else if(aa=='next')
        {
           state.value.pageIndex++; 
        }
     
        show();
    }
    //借款跳转
    const borrow=(id:any)=>{
        router.push({
            path:'/main/userBorrow',
            query:{
                id:id
            }
        })
    }
    </script>
    
    
    
    
    
    <style scoped>
    
    </style>